<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
    <style type="text/css">
      .p1{width: 100px;height: 50px;background: red;}
      .p2{width: 100px;height: 50px;background: green;}
      
      .t1-enter-active, .t1-leave-active {
        transition: all 1s;
      }
      .t1-enter{
        opacity: 0;
        transform: translate(-100px);
      }
      .t1-enter-to, .t1-leave{
        transform: translate(0);
        opacity: 1;
      }
      .t1-leave-to{
        transform: translate(100px);
        opacity: 0;
      }
    </style>
	</head>
	<body>
    <div id="app">
      <h2>{{title}}</h2>
      <button @click="show = !show">点击切换</button>
      
      <transition name="t1">
        <p class="p1" v-if="show">hello</p>
      </transition>
      
      <transition name="t2">
        <p class="p1" v-if="show">hello</p>
      </transition>
      
    </div>
	</body>
  <script src="../vue.js"></script>
  <script>
    new Vue({
      el:"#app",
      data:{
        title:"vue的过渡",
        show: false
      }
    })
  </script>
</html>
